<template>
  <div class="chat_container">
    <div class="chat-wrap">
      <div class="chat-left">
        <div class="search-part"></div>
        <div class="chat-group" v-for="item in groupList" :key="item.id" :class="{ active:qunGrouId===item.id?true:false }" @click="handleChangeQun(item.id)">
          <img :src="item.titleImg" alt="" />
          <span>{{ item.title }}</span>
        </div>
      </div>
      <div class="chat-right">
        <div class="chat-title">{{qunInfo.title}}</div>
        <div class="content-wrap" @click.prevent="menuVisible = false;menuSelectId=null">
          <div class="chat-content">
            <div
              class="chat-item"
              v-for="item in newsList"
              :key="item.id"
              :class="{
                self:
                  item.authorInfo.id === $store.state.user.userInfo.id
                    ? true
                    : false,
              }"
            >
              <div class="pic" @contextmenu.prevent="(e)=>handleMenu(item,e)">
                <img :src="item.authorInfo.avatar" alt="" />
              </div>
              <div class="right">
                <div class="userinfo">
                  <span class="username">{{ item.authorInfo.nickname }}</span>
                  <span class="time">{{ beforeTime(item.createTime) }}</span>
                </div>
                <div class="content">{{ item.content }}</div>
              </div>
            </div>
          </div>
          <textarea
            class="chat-edit"
            v-model="editContent"
            @input="handleChangeContent"
          ></textarea>
          <div class="chat-bottom">
            <span>{{ editContent.length }}/500</span>
            <div class="chat-send">
              <span>按下Enter发送内容</span>
              <el-button round @click="handleSend">发送</el-button>
            </div>
          </div>
        </div>
        <Menu v-show="menuVisible" :zuobiao="zuobiao" :menuSelectId="menuSelectId" @changeForum="handleChangeForum" />
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, reactive,computed } from "vue";
import { useStore } from "vuex";

import { queryChatNewsList,queryQunList } from "@/api/chat.js";
import { beforeTime } from "@/utils/timeInterval.js";
import Menu from "./components/menu.vue"
import socket from "@/utils/socket.js"
const $store = useStore();
let userInfo = $store.state.user.userInfo;
let qunGrouId = ref("q1");
let newsList = ref([]);
let groupList = ref([]);
let editContent = ref("");
let menuVisible = ref(false);
let zuobiao = reactive({
  left:'0px',
  top:'0px',
})
let menuSelectId = ref(null);

onMounted(() => {
  getGroupList();
  getNewsList();
});

let qunInfo = computed(()=>{
  let item = groupList.value.find(item=>item.id===qunGrouId.value);
  return item || {
    title:"文一博客交流群"
  };
})

const getGroupList = async ()=>{
  const res = await queryQunList();
  console.log("group",res)
  groupList.value = res.data;
}

// 请求消息
const getNewsList = async () => {
  const res = await queryChatNewsList({ groupId: qunGrouId.value });
  console.log("data", res);
  newsList.value = res.data;
};

// 连接
socket.on("open", () => {
  console.log("连接确认");
});

// 广播接收socket数据
socket.on("update", (res) => {
  let item = JSON.parse(res);
  let newItem = reactive(item);
  // 这里的item居然不是响应式的
  newsList.value = [...newsList.value, newItem];
  console.log("broadcase", newsList);
});

// 编辑变化
const handleChangeContent = () => {
  console.log(editContent.value.length, "content");
};

// 发送
const handleSend = () => {
  let id = userInfo.id;
  let requestObj = {
    userId: id,
    content: editContent.value,
    groupId: qunGrouId.value,
  };

  socket.emit("send", JSON.stringify(requestObj));
  editContent.value = "";
};

const handleChangeForum = (item)=>{
  qunGrouId.value = item.userId+`,${$store.state.user.userInfo.id}`
  menuVisible.value = false;
  console.log(item,"qunid");
  let newItem = {
    id:qunGrouId.value,
    title:item.authorInfo.nickname,
    titleImg:item.authorInfo.avatar,
  }
  groupList.value = [...groupList.value,newItem];
  getNewsList();
}

const handleChangeQun = (id)=>{
  qunGrouId.value =id;
  getNewsList();
}

const handleMenu = (item,e) => {
  console.log(item,"item")
  menuSelectId.value  = item;  
  menuVisible.value = true;
  let x = e.clientX;
  let y = e.clientY;
  zuobiao = Object.assign(zuobiao,{
    top:y+'px',
    left:x+'px'
  }) 
  console.log(x, y, "右键菜单");
};
</script>
<style lang="scss" scoped>
.chat_container {
  width: 80%;
  margin: 0 auto;
  margin-top: 60px;
  .chat-wrap {
    border-radius: 10px;
    margin: 0 auto;
    background: #fff;
    width: 80%;
    min-height: 600px;

    display: flex;
    .chat-left {
      min-width: 250px;
      border: 1px solid #e8e8ed;
      border-left: none;
      .search-part {
        border-top-left-radius: 10px;
        background-color: #fff;
        border: 1px solid #e8e8ed;
        border-right: none;
        border-top: none;
        height: 50px;
      }
      .chat-group {
        background-color: #fff;
        border: 1px solid #e8e8ed;
        border-right: none;
        border-top: none;
        height: 80px;
        display: flex;
        padding: 0 8px 0 24px;
        align-items: center;
        &.active {
          background-color: rgb(232 232 237 / 70%);
        }
        img {
          width: 45px;
          height: 45px;
          border-radius: 50%;
          margin-right: 10px;
        }
        span {
          margin-bottom: 28px;
        }
        &:hover {
          background-color: rgb(232 232 237 / 70%);
        }
      }
    }
    .chat-right {
      flex: 1;
      .menu {
        width: 100px;
        // height: 100px;
        margin: 0;
        background: #424656;
        z-index: 3000;
        position: fixed;
        list-style-type: none;
        font-weight: 400;
        color: #333;
        box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
        border-radius: 5px;
      }
      .chat-title {
        color: #3a8ee6;
        text-align: center;
        height: 50px;
        line-height: 50px;
        border-bottom: 1px solid #e8e8ed;
        border-top: 1px solid #e8e8ed;
        border-top-right-radius: 10px;
      }
      .content-wrap {
        position: relative;
        height: calc(100% - 50px);

        .chat-content {
          height: calc(100% - 150px);
          overflow-y: auto;
          padding: 10px 24px;
          height: 400px;
          .chat-item {
            overflow: hidden;
            margin-bottom: 20px;
            &.self {
              display: flex;
              flex-direction: row-reverse;
              .pic {
                margin-left: 10px;
              }
            }
            .pic {
              overflow: hidden;
              border-radius: 50%;
              float: left;
              width: 45px;
              height: 45px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .right {
              float: left;
              margin-left: 10px;
              span {
                margin-left: 10px;
                font-size: 12px;
                color: #909399;
              }
              .content {
                margin-top: 10px;
                padding: 4px 10px;
                background: #f5f5f5;
                border-radius: 2px 18px 18px;
              }
            }
          }
        }
        .chat-edit {
          border: none;
          border-top: 1px solid #e8e8ed;
          resize: none;
          border-bottom-right-radius: 10px;
          width: 100%;
          height: 150px;
          padding: 10px;
        }
        .chat-bottom {
          display: flex;
          justify-content: space-between;
          padding: 0 16px;
          align-items: center;
          span {
            font-size: 14px;
            color: #777888;
            line-height: 20px;
            margin-right: 10px;
          }
        }
      }
    }
  }
}
</style>
